<template>
  <div id="calendar-container">
    <div id="calendar">
      <!-- 年份 月份 -->
      <div class="month">
        <p class="calendar-title">工作日历</p>
        <ul>
          <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
          <li class="arrow" @click="pickPre(currentYear,currentMonth)">&lt;&lt;</li>
          <li class="arrow" @click="pickPreDay(selected_date)">&lt;</li>
          <li class="year-month">
              <span class="choose-year">{{ currentYear }}</span>
              <span class="choose-month">{{ currentMonth }}月</span>
          </li>
          <li class="arrow" @click="pickNextDay(selected_date)">&gt;</li>
          <li class="arrow" @click="pickNext(currentYear,currentMonth)">&gt;&gt;</li>
        </ul>
      </div>
      <h3 class="month__space"></h3>
      <!-- 星期 -->
      <div class="days__box">
        <ul class="weekdays">
          <li>一</li>
          <li>二</li>
          <li>三</li>
          <li>四</li>
          <li>五</li>
          <li style="color:red">六</li>
          <li style="color:red">日</li>
        </ul>
        <h3 class="weeks__space"></h3>
        <!-- 日期 -->
        <ul class="days">
          <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
          <li  v-for="(dayobject, index) in days" :key="index">
              <!--本月-->
              <!--如果不是本月  改变类名加灰色-->

              <span v-if="dayobject.day.getMonth()+1 != currentMonth" 
                    class="other-month">
                {{ dayobject.day.getDate() }}
              </span>
              <!--如果是本月  还需要判断是不是这一天-->
              <span v-else :class="thisDay == index ? 'this-day' : ''">
            <!--今天  同年同月同日-->
                  <span v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()" 
                        class="active"
                        @click="chooseToday(index)">
                    {{ dayobject.day.getDate() }}
                  </span>
                  <span v-else
                        @click="chooseToday(index)">
                      {{ dayobject.day.getDate() }}
                  </span>
              </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentDay: 1,
      currentMonth: 1,
      currentYear: 1970,
      currentWeek: 0,
      days: [],
      dayLength: [],  
      thisDay: -1,
      beforeDays: 0,
      selected_date:{},
    }
  },
  created () {
    this.initData(null)
    let day = new Date().getDate()
    this.$emit('getThisDya', day + this.beforeDays -1, this.beforeDays)
  },
  mounted () {
    
  },
  methods: {
    /**
     * 选择今天
     */
    chooseToday(val) {
      this.thisDay = val
      let d=this.days[val].day
      this.selected_date=new Date(d.getFullYear(),d.getMonth(),d.getDate())
      this.$emit('getThisDya', val, this.beforeDays)
    },
    /**
     * 日历
     */
    initData(cur) {
      let leftcount=0, //存放剩余数量
          date,//从1号开始
          // d,
          ds;//当前日期
          // cur='2018/12/24'
          // console.log(cur)
          // debugger;
      if (cur) {
        ds=new Date(cur);
        date = new Date(ds.getFullYear(),ds.getMonth(),1)
        //???
        // d = new Date(ds.getFullYear() , ds.getMonth() , 1)
        // d.setDate(35)
        // console.log(date.getFullYear(),date.getMonth(),date)
      } else {
        ds=new Date();
        date = new Date(this.formatDate(ds.getFullYear(),ds.getMonth() + 1,1))
        // ???
        // d = new Date(ds.getFullYear() , ds.getMonth() , 1)
        // d.setDate(35)
      }
      this.currentDay = date.getDate()
      this.currentYear = date.getFullYear()
      this.currentMonth = date.getMonth() + 1
      // console.log(date,this.currentYear,this.currentMonth,this.currentDay)
      this.$emit('getThisMonth', this.currentYear, this.currentMonth)
      this.currentWeek = date.getDay() // 1...6,0
      if (this.currentWeek == 0) {
        this.currentWeek = 7
      }
      // console.log(date,this.currentWeek)
      let str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay)
      this.days.length = 0
      // 今天是周日，放在第一行第7个位置，前面6个
      //初始化本周
      for (let i = this.currentWeek - 1; i >= 0; i--) {
          let d = new Date(str)
          d.setDate(d.getDate() - i)
          let dayobject={} //用一个对象包装Date对象  以便为以后预定功能添加属性
          dayobject.day=d
          this.days.push(dayobject)//将日期放入data 中的days数组 供页面渲染使用
      }
      // console.log(this.days.map(v=>v.day.toLocaleString()))
      //其他周
      let daysNumber = 0
      this.days.forEach((item) => {
        if(item.day.getMonth()+1 != this.currentMonth) {
          daysNumber += 1
        }
      })
      // console.log(daysNumber)
      this.beforeDays = daysNumber
      let curMonthDays = new Date(ds.getFullYear(), (ds.getMonth()+1), 0).getDate();
      let daysLength = 0
      if(daysNumber + curMonthDays <= 35) {
        daysLength = 35
      } else {
        daysLength = 42
      }
      // console.log(curMonthDays,daysLength,str)
      for (let i = 1; i <= daysLength - this.currentWeek; i++) {
          let d = new Date(str)
          d.setDate(d.getDate() + i)
          let dayobject={}
          dayobject.day=d
          this.days.push(dayobject)
      }
      // console.log(this.days)
      //默认选中当天日期
      !cur&&this.selectDate();
      // console.log(this.days[0].day.toLocaleString())
    },
    //选中日期
    selectDate(cur){
      let date,date_str;
      if(cur&&typeof cur=="string"){
        date_str=cur
        date=new Date(cur)
      }else{
        date=cur||new Date()
        date_str=this.formatDate(date.getFullYear(),date.getMonth()+1,date.getDate())
      }
      for(let i=0;i<this.days.length;i++){
        let d=this.days[i].day,str=this.formatDate(d.getFullYear(),d.getMonth()+1,d.getDate())
        if(date_str==str){
          this.thisDay=i;
          this.selected_date=date;
          break
        }
      }
    },
    pickPre(year, month) {
      this.thisDay = -1
      // setDate(0); 上月最后一天
      // setDate(-1); 上月倒数第二天
      // setDate(dx) 参数dx为 上月最后一天的前后dx天
      let d = new Date(this.formatDate(year , month , 1))
      d.setDate(0)
      this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1))
    },
    pickNext(year, month) {
      this.thisDay = -1
      let d = new Date(this.formatDate(year , month , 1))
      d.setDate(35)
      this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1))
    },
    pickYear(year, month) {
      alert(year + "," + month)
    },

    // 返回 类似 2016-01-02 格式的字符串
    formatDate: function(year,month,day){
      let y = year
      let m = month
      if(m<10) m = "0" + m
      let d = day
      if(d<10) d = "0" + d
      return y+"/"+m+"/"+d
    },
    pickPreDay(date){
      let d=new Date(date.getFullYear(),date.getMonth(),date.getDate());
      d=new Date(d.setDate(d.getDate()-1));
      // console.log(d);
      if(d.getMonth()+1!=this.currentMonth){
        this.initData(this.formatDate(d.getFullYear(),d.getMonth()+1,d.getDate()))
      }
      // console.log(d.toLocaleString());return;
      this.selectDate(d);
    },
    pickNextDay(date){
      let d=new Date(date.getFullYear(),date.getMonth(),date.getDate());;
      d=new Date(d.setDate(d.getDate()+1));
      // console.log(d);
      if(d.getMonth()+1!=this.currentMonth){
        this.initData(this.formatDate(d.getFullYear(),d.getMonth()+1,d.getDate()))
      }
      // console.log(d.toLocaleString());return;
      this.selectDate(d);
    }
  },
}
</script>

<style lang="stylus" scoped>
bg-main = blue
fc-day-this-month = #242424
fc-day-other-month = #ccc
fc-cur-day = lighten(bg-main,30%)

#calendar-container{
  width:100%;
  height:100%;
}
#calendar{
  width:100%;
  height:100%;
  box-sizing:border-box;
  .this-day{
    // color: yellow !important;
    border:1px solid bg-main;
  }
  li {
    display: inline-block;

  }
  a {
    color: #42b983;
  }
  .other-month{
    color: fc-day-other-month; 
  }
  .active{
    color: fc-cur-day;
    position:relative;
    display:block;
    &::after{
      content:'.';
      font-size:.4rem;
      position:absolute;
      bottom:14%;
      left:35%;
    }
  }
  //整体布局
  .days__box{
    width: 100%;
    height:86%;
    box-sizing:border-box;
  }
  .month{
    .calendar-title{
      font-size:.16rem;
      color:fc-work-title;
    }
    ul li span{
      font-size:.14rem;
    }
    display: flex;
    justify-content:space-between;
    height:10%;
    box-sizing:border-box;
    .arrow{
      cursor:pointer;
      color:fc-day-other-month;
      letter-spacing:-.04rem;
      margin-left:.03rem;
      margin-right:.07rem;
    }
  }
  .month__space{
    height:4%;
  }
    
  .weekdays{
    height:10%;
    padding:0 5%;
    display: flex;
    >li{
      flex:1;
      box-sizing:border-box;
      // border: 1px solid blue;
      text-align: center;
      height:100;
      font-size:.12rem;
    }
  }  
  .weeks__space{height:4%;}
  .days{
    height:86%;
    padding:0 5%;
    display: flex;
    justify-content:space-between;
    align-items: center;
    flex-wrap: wrap;
    color:fc-day-this-month;
    >li{
      width:14%;
      box-sizing:border-box;
      // border: 1px solid #000;
      text-align: center;
      vertical-align:middle;
      height:16.6%;
      position:relative;
      span{
        font-size:.12rem;
      }
      >span{
        display:block;
        position:absolute;
        border-radius:50%;
        // border:1px solid bg-main;
        box-sizing:border-box;
        width:.28rem;
        height:.28rem;
        line-height:.26rem;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%)
        :not(.other-month){
          cursor:pointer;
        }
      }
    }
  }   
}

</style>